<template>
	<!-- <view class="main" :style="{height:contentHeight+'px'}"> -->
	<view class="main">
		<st-navigation backgroundColor="rgba(0, 0, 0, 0)"></st-navigation>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun"
						:current="current_index" :circular="false" :vertical="true">
						<block v-if="dataSouce">
							<swiper-item :key="index" v-for="(item,index) in dataSouce">
								<view class="swiper-item uni-bg-black video-wrap">

									<video objectFit="cover" :custom-cache="false" :show-fullscreen-btn="false"
										autoplay="true" :controls="false" :show-center-play-btn="false"
										enable-play-gesture :initial-time="0" duration="2000" class="video"
										:id="'id'+index" :src="current.video" loop :enable-progress-gesture="false"
										v-if="index == current_index">
									</video>
									</video>
									<view class="content" style="">
										<view class="avatar " @click="handleToShop(designer)" style="margin-bottom: 24rpx;">
											<view>
												<StAvatar :designer="designer"></StAvatar>
											</view>

											<view class="d-flex a-center" style="height: 50rpx;line-height: 50rpx;">
												<view class="name" style="">{{ designer.username }}</view>
												<view class="" style="margin-right: 16rpx;margin-left: 10rpx;">
													<view v-if="designer.is_online===1" class="d-flex a-center j-center"
														style="padding: 4rpx 0 2rpx 0; gap:4rpx;width: 54rpx;height: 28rpx;border-radius: 8rpx;background-color: #E0FAD9;">
														<view class="rounded-circle"
															style="padding-left: 4rpx; width: 8rpx;height:8rpx ;background-color: #6BC54A;">
														</view>
														<view class="d-flex a-center" style="padding-right: 6rpx;">
															<text style="color: #76BD53;font-size: 16rpx;">在线</text>
														</view>
													</view>
													<view class="d-flex a-center j-center" v-else
														style="padding: 4rpx 0 2rpx 0;gap: 8rpx; width: 54rpx;height: 28rpx;border-radius: 8rpx;background-color: #E7E7E7;">
														<view class="rounded-circle"
															style="padding-left: 4rpx;width: 8rpx;height: 8rpx;background-color: #818181;">
														</view>
														<view class="d-flex a-center" style="padding-right: 6rpx;">
															<text style="color: #818181;font-size: 16rpx;">离线</text>
														</view>
													</view>
												</view>
												<view class="">
													<span
														style="font-size: 24rpx;font-weight: 350;color: #FFFFFF;">进去逛逛>></span>
												</view>
											</view>
										</view>
										<!-- <view class="center-content" v-if="current.title">
									
											{{ current.title }}
										</view> -->
										<view class="desc-container" style="margin-bottom:88rpx;">
											
										</view>
										<view class="bottom-con" v-if="current.video_desc" style="margin-top: 16rpx;">
											<view class="" v-for="(item,index) in current.video_desc.split(' ')" style="border-radius: 8rpx; margin-right: 4rpx; width: fit-content;padding: 2rpx 16rpx;background-color: rgba(0, 0, 0, 0.30);">
												{{item}}
											</view>
							
										</view>
										<view class="">

										</view>
									</view>
									<view class="content-right">
										<view class="item" style="width: 72rpx;height: 72rpx;">
											<view class="icon">
												<image src="../../static/images/ysmHome/icon-eye.png" mode="widthFix">
												</image>
											</view>
											<view class="text">{{ current.viewed_num || 0 }}</view>
										</view>
										<view class="item" @click="collect" style="width: 72rpx;height: 72rpx;">
											<view class="icon">
												<image v-if="isCollect"
													src="../../static/images/ysmHome/icon-stared.png" mode="widthFix">
												</image>
												<image v-else src="../../static/images/ysmHome/icon-star.png"
													mode="widthFix"></image>
											</view>
											<view class="text">收藏</view>
										</view>
										<view class="item share-warp" style="width: 72rpx;height: 72rpx;">
											<view class="icon" style="width: 72rpx;height: 72rpx;">
												<image src="../../static/images/ysmHome/icon-share.png" mode="widthFix">
												</image>
											</view>
											<view class="text">
												转发
											</view>
											<button open-type="share" class="share-btn">转发</button>
										</view>
									</view>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
		</view>

		<!-- <view class="content">
			<view class="avatar" @click="handleToShop(designer)">
				<view>
					<StAvatar :designer="designer"></StAvatar>
				</view>
				<view class="name">{{ designer.username }} <span
						style="font-size: 24rpx;margin-left: 20rpx;font-weight: 200;">进店逛逛>></span> </view>
			</view>
			<view class="center-content" v-if="current.title"> {{ current.title }} </view>
			 
			<view class="bottom-con" v-if="current.video_desc">
				{{ current.video_desc }}		 
			</view>
		</view> -->

		<!-- 右侧定位 查看 收藏 转发 -->
		<!-- <view class="content-right">
			<view class="item">
				<view class="icon">
					<image src="../../static/images/ysmHome/icon-eye.png" mode="widthFix"></image>
				</view>
				<view class="text">{{ current.viewed_num || 0 }}</view>
			</view>
			<view class="item" @click="collect">
				<view class="icon">
					<image v-if="isCollect" src="../../static/images/ysmHome/icon-stared.png" mode="widthFix"></image>
					<image v-else src="../../static/images/ysmHome/icon-star.png" mode="widthFix"></image>
				</view>
				<view class="text">收藏</view>
			</view>
			<view class="item share-warp">
				<view class="icon">
					<image src="../../static/images/ysmHome/icon-share.png" mode="widthFix"></image>
				</view>
				<view class="text">
					转发
				</view>
				<button open-type="share" class="share-btn">转发</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import internal from 'stream';
	import StAvatar from '../../components/st-avatar/st-avatar.vue';
	import ReadMoreVue from '@/components/ReadMore.vue';
	export default {
		components: {
			StAvatar,
			ReadMoreVue
		},
		data() {
			return {
				isShowMore: false,
				elementWidthRpx: 0,
				isOverFlow: false,
				contentStyle: 'line-height: 40rpx;',
				isCollect: false,
				strImage: '../../static/images/ysmHome/icon-star.png',
				strImaged: '../../static/images/ysmHome/icon-stared.png',
				touchStartX: 0, // 触屏起始点x  
				touchStartY: 0, // 触屏起始点y 
				contentHeight: 0,
				dataSouce: [],
				current: '',
				current_index: 0,
				isFullscreen: true,
				isPlaying: true,
				designer: {},
				is_paly: false,
				timer: '',
				index: 0,
				pren: 0,
				next: 0,
				data: [],
				dataLength: 0
			}
		},
		onLoad(option) {
			let data = JSON.parse(decodeURIComponent(option.dataSouce));
			this.data = data;
			this.dataLength = data.length
			this.current = JSON.parse(decodeURIComponent(option.current));
			this.current_index = option.current_index;
			this.dataSouce[option.current_index] = this.current;
			this.timer = setInterval(() => {
				this.dataSouce = this.data;
				clearInterval(this.timer);
				this.timer = null;
			}, 1000)
			this.getDesignerInfo(this.current.user_id, this.current.id, 'basic');
			this.checkCollect(this.$store.state.user.id, this.current.id);
			// if (option.dataSouce && option.dataSouce.length > 0) {
			// 	this.dataSouce = JSON.parse(option.dataSouce);
			//   console.log(this.dataSouce)
			// }

		},
		// mounted() {
		// 	const query = uni.createSelectorQuery().in(this)
		// 	query.select('#contentText').boundingClientRect((rect) => {
		// 		if (rect.height > 80) { // 修改为你的实际线高的两倍
		// 			this.contentStyle =
		// 				'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 40rpx;'
		// 			this.isOverFlow = true
		// 		}
		// 	}).exec()
		// },
		onReady: function() {

			this.getElementWidth();
			const {
				height
			} = wx.getMenuButtonBoundingClientRect()
			console.log(height)
			const {
				windowHeight
			} = wx.getSystemInfoSync()
			console.log(windowHeight)
			const paddingTop = wx.getStorageSync('navHeight') || (height + 8) * 2
			console.log(paddingTop)
			const contentHeight = windowHeight - paddingTop
			// 将计算结果保存到缓存中，方便下次使用
			// wx.setStorageSync('navHeight', contentHeight)
			this.contentHeight = contentHeight
		},
		methods: {
			temp(){
				console.log('111')
			},
			// switchShowMore() {
			// 	this.isShowMore = !this.isShowMore;
			// 	if (this.isShowMore) {
			// 		this.contentStyle = 'line-height: 40rpx;'
			// 	} else {
			// 		this.contentStyle =
			// 			'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 40rpx;'
			// 	}
			// },
			getElementWidth() {
				const query = uni.createSelectorQuery();
				query.select('#desc').boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						let elementWidthPx = res[0].width; // 获取的px值
						let windowWidthPx; // 屏幕的px值
						uni.getSystemInfo({ // 获取设备信息
							success: (res) => {
								windowWidthPx = res.windowWidth; // 获取屏幕宽度
								this.elementWidthRpx = elementWidthPx / windowWidthPx * 750; // 转化为rpx
								console.log('元素宽度:', this.elementWidthRpx, 'rpx');
							}
						});
					} else {
						console.error('获取元素宽度失败');
					}
				});
			},
			// current改变时会触发change 事件
			changefun(e) {
				let current = e.detail.current
				uni.setNavigationBarTitle({
					title: this.PayVideo[current].video_name
				})
				if (this.PayVideo[current].description) {
					this.description = this.PayVideo[current].description
				}
				this.duration = this.PayVideo[current].video_time
				let videoContext = uni.createVideoContext('id' + this.current)
				videoContext.pause() //停止播放
			},
			// 动画结束时触发
			animationfinishfun(e) {

				let current = e.detail.current
				let videoContext = uni.createVideoContext('id' + this.current_index)
				videoContext.pause() //停止播放非当前视频
				videoContext = uni.createVideoContext('id' + current)
				videoContext.play() //开始播放当前视频
				this.current_index = current //保存当前下标 播放下一个视频时停止上一个视频 防止声音重复
				this.current = this.dataSouce[this.current_index];
				// this.getDesignerInfo(this.dataSouce[this.current_index].user_id, this.dataSouce[this.current_index].id,
				// 	'basic');
				// console.log('请求收藏')
				// this.checkCollect(this.$store.state.user.id, this.current.id);
					
			},
			collect() {
				let wanlLogin = uni.getStorageSync("wanlshop:user");
				if (wanlLogin != '') {
					this.isCollect = this.isCollect == true ? false : true;
					this.userCollect(this.$store.state.user.id, this.current.id);
				} else {
					uni.navigateTo({
						url: '/pagesYSM/ysmMy/auth/auth'
					});
				}

			},
			// 获取设计师详情
			async getDesignerInfo(id, video_id, type) {
				await this.$api.get({
					url: '/wanlshop/user/getDesignerInfo',
					data: {
						type,
						id,
						video_id
					},
					success: res => {
						console.log(res)
						if (type === 'basic') {
							this.designer = res;
						} else {
							this.designer[type] = res;
						}
					}
				});
			},
			async userCollect(id, video_id) {
				await this.$api.get({
					url: '/wanlshop/user/userCollect',
					data: {
						id,
						video_id
					},
					success: res => {
						console.log('userCollect', res)
					}
				});
			},
			async checkCollect(id, video_id) {
				let that = this;
				await this.$api.get({
					url: '/wanlshop/user/checkCollect',
					data: {
						id,
						video_id
					},
					success: res => {
						console.log('checkCollect', res)
						if (res == true) {
							that.isCollect = true;
						} else {
							that.isCollect = false;
						}
					}
				});
			},
			loadedmetadata(e) {
				console.log(e)
				let videoContext = uni.createVideoContext('myVideo', this);
				this.videoContext = videoContext;
				// videoContext.requestFullScreen();
				// videoContext.play();
				console.log(uni.createVideoContext('myVideo', this))
				// this.videoContext = uni.createVideoContext('myVideo', this);
				// this.videoContext.requestFullScreen();
				// this.videoContext.play();
				// this.videoContext.showStatusBar();
			},
			handleTap() {
				// this.isPlaying = !this.isPlaying
				if (this.isPlaying) {
					this.videoContext.pause();
					this.isPlaying = false;
				} else {
					this.videoContext.play();
					this.isPlaying = true;
				}
			},
			endPlay() {
				// this.is_paly = false,
				// this.isPlaying = false;
				// this.onPlay();
			},
			onPause(e) {
				console.log(e)
				this.is_paly = false,
					this.videoContext.pause()
			},
			onPlay() {
				console.log('开始播放11111')
				this.videoContext.play()
			},
			handleToShop(item) {
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}`
				})
			},
		},
		beforeDestroy() {
			// 关闭页面前停止视频播放
			//this.videoContext.pause()
		}
	}
</script>

<style lang="less" scoped>
	.btn::before{
		content: '展开';
	}
	.exp:checked+.text .btn::before{
		content: '收起';
	}
	.btn{
		float: right;
		clear: both;
	}
	.text::before{
		content: '';
		height: calc(100%-40rpx);
		float: right;
	}
	.exp:checked+.text{
		-webkit-line-clamp: 999;
	}
	.desc-container {
		width: 502rpx;
		overflow: hidden;
	}

	.desc-text {
		color: #fff;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.expand-desc {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.circle {
		background: rgba(34, 34, 34, 0.4);
		border-radius: 50%;
		z-index: 2;
		height: 70px;
		width: 70px;
		position: fixed;
		top: 0;
		bottom: 441rpx;
		left: 31rpx;

		margin: auto;

		.red {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 3;
			height: 35px;
			width: 35px;
		}
	}

	.swiper {
		height: 100vh;

		.swiper-item {
			height: 100vh;
			position: relative;
		}

		.uni-bg-black {
			background: black;
		}
	}

	.video {
		width: 100vw;
		height: 100%;
		//position: relative;
	}

	.main {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #000;

		/deep/ .st-navigation {
			height: 0 !important;
		}

		.video-wrap {
			width: 100%;
			height: 100%;
			background: #000;

			.video {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		position: absolute;
		z-index: 9999999;
		bottom: 54rpx;
		left: 40rpx;
		right: 68px;

		/deep/ .avatar {
			display: flex;
			align-items: center;
			// margin-bottom: 40rpx;

			margin-left: -6rpx;


			.designer-avatar {
				width: 140rpx;
				height: 140rpx;

				.designer_level {
					height: 42rpx;
				}
			}

			.name {
				margin-left: 20rpx;
				font-size: 36rpx;
				font-weight: 700;
				color: #fff;
			}
		}

		.center-content {
			// margin-bottom: 20rpx;
			line-height: 30rpx;
			font-size: 28rpx;
			color: #fff;
		}

		.bottom-con {
			display: flex;
			color: #fff;
			margin-bottom: 22rpx;
			font-size: 28rpx;
			// .item {
			//   margin-right: 20rpx;
			//   font-size: 24rpx;

			// }
		}
	}

	.content-right {
		position: absolute;
		z-index: 9999999;
		bottom: 54rpx;
		right: 40rpx;
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 28rpx;

			.icon {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				// background-color: rgba(0, 0, 0, 0.5);
				color: #fff !important;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-top: 4rpx;
				font-size: 20rpx;
				color: #fff;
			}

			&:nth-child(1) .text {
				margin-top: 4rpx !important;
			}
		}

		.share-warp {
			position: relative;

			/deep/.share-btn {
				position: absolute;
				top: 0;
				left: -30rpx;
				background: transparent;
				color: transparent;
				height: 100rpx;
				width: 100rpx;
				z-index: 9999999;
				border: none;

				&::after {
					border: none;
				}
			}
		}
	}
</style>